<template>
  <div>
    <el-form :model="form">
      <el-form-item label="文章标题" :label-width="formLabelWidth">
        <el-input
          v-model="form.title"
          autocomplete="off"
          placeholder="请输入文章标签"
          @blur="pInput"
        ></el-input>
        <p class="ppp" v-if="inputdep1">请输入文章标题</p>
      </el-form-item>
      <el-form-item label="文章内容" prop="question" class="tab">
        <div class="editor-body">
          <quill-editor
            ref="text"
            v-model="form.articleBody"
            class="editor"
            :options="editorOption"
            @blur="pInput2"
          />
          <p class="ppp2" v-if="inputdep2">请输入文章内容</p>
        </div>
      </el-form-item>
      <el-form-item label="视频地址" :label-width="formLabelWidth">
        <el-input
          v-model="form.videoURL"
          autocomplete="off"
          placeholder="请输入视频地址"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//  富文本插件接口
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
  ['blockquote', 'code-block'], // 引用  代码块
  [{ header: 1 }, { header: 2 }], // 1、2 级标题
  [
    {
      list: 'ordered'
    },
    { list: 'bullet' }
  ], // 有序、无序列表
  ['link', 'image', 'video'], // 链接、图片、视频
  ['clean'] // 清除文本格式
]

export default {
  name: 'TextEditor',
  components: {
    quillEditor
  },
  props: ['Obj'],
  data () {
    return {
      form: {
        title: '',
        articleBody: '',
        videoURL: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      },
      inputdep1: false,
      inputdep2: false
    }
  },
  created () {
    this.updatedata()
  },
  methods: {
    // 获取数据，如果props传值有Obj，就将Obj深拷贝一份给form
    updatedata () {
      try {
        if (this.Obj) {
          setTimeout(() => {
            this.form = this.deepClone(this.Obj)
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 深拷贝
    deepClone (source) {
      const targetObj = Array.isArray(source) === Array ? [] : {}
      for (const keys in source) {
        if (typeof source[keys] === 'object') {
          if (source[keys] === null) {
            targetObj[keys] = ''
          } else {
            targetObj[keys] = this.deepClone(source[keys])
          }
        } else {
          targetObj[keys] = source[keys]
        }
      }
      return targetObj
    },
    pInput () {
      if (this.form.title === '') {
        this.inputdep1 = true
      } else {
        this.inputdep1 = false
      }
    },
    pInput2 () {
      if (this.form.articleBody === '') {
        this.inputdep2 = true
      } else {
        this.inputdep2 = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item__content {
  .editor-body {
    width: 100%;
    position: relative;
    padding-left: 120px;
    border-radius: 4px;
    margin-bottom: 50px;
    .quill-editor {
      width: 100%;
      height: 180px !important;
    }
  }
}
::v-deep .tab {
  .el-form-item__label {
    position: absolute;
    margin-left: 50px;
  }
}
.ppp,.ppp2 {
  color: red;
  margin: 0;
  position: absolute;
  font-size: 12px;
  margin-top: -8px;
}
.ppp2:nth-child(2){
  margin-top: 45px;
}
</style>
